<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="./script/rem.js"></script>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>

</head>

<body>

    <header class="shop-head" style="padding-top:0.4rem;">
        <div class="shop-head-l">
          <!-- <i class="fa fa-search"></i> -->
      </div>
      <h3 id='title_text'>0件商品 - 共 0 元</h3>
      <div class="shop-head-r" onclick="shop_cart_on()"><i class="fa fa-shopping-cart"></i><span id='count'>0</span></div>
  </header>

  <style>
  body,
  html {
    height: 100%;
}

body {
    background: #fff;
}
</style>

<div id="aui-slide" class="shop-banner">
    <div class="aui-slide-wrap">
        <div class="aui-slide-node bg-dark">
            <img src="image/shop-img.jpg">
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="image/shop-img.jpg">
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="image/shop-img.jpg">
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>




<script type="text/template" id="templateImage">
    <div class="aui-slide-wrap">
        {{~it.data:value:index}}
        <div class="aui-slide-node bg-dark" tapmode onclick='entrance({{=value.type}},"{{=value.ext}}")'>
            <img src="{{=value.picture}}" />
        </div>
        {{~}}
    </div>
    <div class="aui-slide-page-wrap">
    </div>
</script>




<div class="shop-list">
    <div class="shop-list-l" id='list'>
        <ul>
                <!-- <li>
                    <p>
                        热销·新品
                    </p>
                </li>
                <li class="active">
                    <p>
                        饮料酒水
                        <i>1</i>
                    </p>
                </li>
                <li>
                    <p>
                        方便速食
                        <i>3</i>
                    </p>
                </li> -->


            </ul>
        </div>

        <div class="shop-list-r">
            <ul class="shop-list-r-t">
                <li class="active" onclick="shop_detail_type(1)" id='sort1'>默认</li>
                <li onclick="shop_detail_type(2)" id='sort2'>
                    价格
                    <span>
                       <i class="fa fa-caret-up"  id='up_icon'></i>
                       <i class="fa fa-caret-down" id='down_icon'></i>
                   </span>
               </li>
               <li onclick="shop_detail_type(4)" id='sort4'>销量</li>
           </ul>
           <div class="shop-list-r-d" id='list1'>
            <ul>


            </ul>
        </div>
    </div>
</div>

<!-- 弹出购物车 -->
<div class="shop-cart-bg">
    <div class="shop-cart">
        <div class="shop-cart-t">
            <span onclick="remove_all_shop()"><i class="fa fa-trash-o"></i>清空购物车</span>
            <i class="fa fa-close" onclick="shop_cart_off()"></i>
        </div>
        <div class="shop-cart-m" id='list_cart'>
                <!-- <ul>
                    <li>
                        <img src="image/classify.jpg">
                        <dl>
                            <dt>澳大利亚·毛孔脏东西浮出来·麦卢...</dt>
                            <dd>
                                <div class="shop-cart-m-l">
                                    <p>￥166</p>
                                    <span>￥200</span>
                                </div>
                                <div class="shop-cart-m-r">
                                    <div class="shop-num fr">
                                        <i class="jian"></i>
                                        <input type="text" value="3">
                                        <i class="jia"></i>
                                    </div>
                                    <span>小计：￥332.00</span>
                                </div>
                            </dd>
                        </dl>
                    </li>
                </ul> -->
            </div>
            <!-- <div class="shop-cart-d" style="bottom:1.2rem;" id="deviceModel"> -->
            <div class="shop-cart-d" id="deviceModel">
                <p id='heji'>合计：￥0</p>
                <span onclick="settlement()"><i class="fa fa-credit-card"></i>结算</span>
            </div>
        </div>
    </div>


    <script type="text/template" id="template">
        <ul>
            {{~it.data:value:index}}
            <li id='act{{=index}}' onclick="get_detail_Data({{=index}},{{=value.id}})">
                <p>
                    {{=value.title}}
                </p>
            </li>
            {{~}}
        </ul>
    </script>

    <script type="text/template" id="template6">
        <ul>
            {{~it.data:value:index}}
            <li id='act{{=index}}' onclick="get_detail_Data({{=index}},{{=value.id}})">
                <p>
                    {{=value.title}}
                    {{? value.undefined <= 99 && value.undefined > 0}}
                    <i>{{=value.undefined}}</i>
                    {{?? value.undefined > 99}}
                    <i>99</i>
                    {{?}}
                </p>
            </li>
            {{~}}
        </ul>
    </script>


    <script type="text/template" id="template1">
        <ul>
            {{~it.data:value:index}}
            <li>
                {{? value.image != ''}}
                <img src="{{=value.image}}" alt=""> {{??}}
                <img src="image/classify.jpg" alt=""> {{?}}
                <dl>
                    <dt tapmode onclick="goods_details({{=value.id}})">{{=value.title}}</dt>
                    <dd tapmode onclick="goods_details({{=value.id}})">￥{{=value.price_current}}</dd>
                    <!-- <span tapmode onclick="goods_details({{=value.id}})">￥{{=value.price}}</span> -->
                    <span tapmode onclick="goods_details({{=value.id}})">已售{{=value.number_sales }}件</span>
                    <i class="jia" onclick="shop_cart_add({{=value.id}},{{=value.category_id}})"></i>
                </dl>
            </li>
            {{~}}
        </ul>
    </script>

    <script type="text/template" id="template_cart">
        <ul>
            {{~it.data:value:index}}
            <li>
                <img src="{{=value.product.image}}">
                <dl>
                    <dt>{{=value.product.title}}</dt>
                    <dd>
                        <div class="shop-cart-m-l">
                            <p>￥{{=value.product.price_current}}</p>
                            <span>￥{{=value.price}}</span>
                        </div>
                        <div class="shop-cart-m-r">
                            <div class="shop-num fr">
                                <i class="jian" onclick="shop_cart_update({{=value.id}},'jian')"></i>
                                <input type="number" value="{{=value.number}}" id='input_{{=value.id}}' class="class_number" data-id="{{=value.id}}" data-number="{{=value.number}}">
                                <i class="jia" onclick="shop_cart_update({{=value.id}},'jia')"></i>
                            </div>
                            <span>小计：￥{{=value.small_all_price}}</span>
                        </div>
                    </dd>
                </dl>
            </li>
            {{~}}
        </ul>
    </script>




</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
<script type="text/javascript" src="./script/aui-slide.js"></script>

<script type="text/javascript">


$(function(){

        var token = $api.getStorage('token');
        $("body").delegate(".class_number","input propertychange",function(){
           var id = $(this).attr('data-id');
           // var count = $(".class_number").val();
           var count = $('#input_'+id).val();
           // var count = $(this).attr('data-number');

           // alert(id);
           // alert(count);

           api.ajax({
               url: webAddress + '/api/cart/update',
               method: 'post',
               data: {
                   values: {
                        id: id,
                        number: count,
                    },
               },
               headers: {
                    'Authorization': 'Bearer '+ token
                },
           },function(ret, err){
               if (ret) {
                 get_cart();
                   // alert( JSON.stringify( ret ) );
               } else {
                   // alert( JSON.stringify( err ) );
               }
           });
        });

      //   if (/Android/gi.test(navigator.userAgent)) {
      //     const innerHeight = window.innerHeight;
      //     window.addEventListener('resize', () => {
      //       const newInnerHeight = window.innerHeight;
      //       if (innerHeight > newInnerHeight) {
      //         // 键盘弹出事件处理
      //     } else {
      //         // 键盘收起事件处理
      //         var token = $api.getStorage('token');
      //         var id = $(".class_number").attr('data-id');
      //         var count = $(".class_number").attr('data-value');
      //          // if(count == 0 || count == ""){
      //          //    var count = 1;
      //          // }
      //          // alert(id);
      //          // alert(count);
      //          api.ajax({
      //            url: webAddress + '/api/cart/update',
      //            method: 'post',
      //            data: {
      //                values: {
      //                   id: id,
      //                   number: count,
      //               },
      //           },
      //           headers: {
      //               'Authorization': 'Bearer '+ token
      //           },
      //       },function(ret, err){
      //        if (ret) {
      //          get_cart();
      //                  // alert( JSON.stringify( ret ) );
      //              } else {
      //                  // alert( JSON.stringify( err ) );
      //              }
      //          });
      //      }
      //  });
      // } else {
      //     window.addEventListener('focusin', () => {
      //       // 键盘弹出事件处理
      //   });
      //     window.addEventListener('focusout', () => {
      //       // 键盘收起事件处理
      //   });
      // }

  });



var number;

var page = 0;
var type_id = 1;
var  icon_type = 0;
apiready = function() {
    reloadListener(); 
    token = $api.getStorage('token');
        // token = 'Bearer ' + token;
        get_slider();

        getData();
        if (token) {
            get_cart();
        }
        pullLoading();

        // class_number();

        // blur_number();

        deviceModel();
    }

    function deviceModel(){

        var deviceModel = api.deviceModel;

        // alert(deviceModel);

        if(deviceModel == "iPhone10,3" || deviceModel == "iPhone10,6" || deviceModel == "iPhone11,8" || deviceModel == "iPhone11,2" || deviceModel == "iPhone11,6" || deviceModel == "iPhone11,4"){

            document.getElementById("deviceModel").style.bottom="1.0rem";
            
        }

    }

    // function class_number(){
    //    api.addEventListener({
    //         name:'keyboardhide'
    //     },function(ret, err){
    //         // api.alert({
    //         //     msg:'键盘隐藏'
    //         // });
    //         alert(111);
    //     });
    // }

    // function blur_number(){
    //     //输入框失去焦点时
    //     $(".class_number").on('blur',function(){
    //         alert(111);
    //     })
    // }

    function get_slider() {
      api.ajax({
          url: webAddress + '/api/home/advertisement',
          method: 'get',
          data: {
            values: {
                position:4
            },
        }
    }, function(ret, err) {
      if (ret) {
            // console.log(JSON.stringify(ret.data));
            var template = $api.byId('templateImage');
            var dotFn = doT.template(template.innerHTML);
            var html = dotFn(ret);
            var list = $api.byId('aui-slide');
            $api.html(list, html);

            var slide = new auiSlide({
                container: document.getElementById("aui-slide"),
                //"width":300, //宽度
                "height": 120, //高度
                "speed": 500, //速度
                "autoPlay": 3000, //自动播放
                "loop": true, //是否循环
                "pageShow": true, //是否显示分页器
                "pageStyle": 'dot', //分页器样式，分dot,line
                'dotPosition': 'center', //当分页器样式为dot时控制分页器位置，left,center,right
                // currentPage: currentFun

            });
        } else {
              // alert(JSON.stringify(err));
          }
      });

  }

  function getData() {
    api.ajax({
        url: webAddress + '/api/product/category',
        method: 'get',
        data: {
            values: {},

        }
    }, function(ret, err) {
        if (ret) {

                // console.log( JSON.stringify( ret ) );
                var template = $api.byId('template');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret);
                var list = $api.byId('list');
                $api.html(list, html);
                get_detail_Data(0, 1);

            } else {
                // alert(JSON.stringify(err));
            }
        });
}


function get_detail_Data(index, id) {
    $('.shop-list-l li').removeClass();
    $('#act' + index).addClass("active");

    type_id = id;
    api.ajax({
        url: webAddress + '/api/product/index',
        method: 'get',
        data: {
            values: {
                    // page: page,
                    category_id: id,
                    // row: 10
                },

            }
        }, function(ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
                if (ret.data != '') {
                    templateFun(ret, 1);
                } else {
                    templateFun(ret);
                }

            } else {
                // alert(JSON.stringify(err));
            }
        });
}


function templateFun(ret) {
    var template = $api.byId('template1');
    var dotFn = doT.template(template.innerHTML);
    var html = dotFn(ret);
    var list = $api.byId('list1');
    $api.html(list, html);
}

function shop_detail_type(sort) {

  $('.shop-list-r-t li i').removeClass();
  if (sort==2) {
      icon_type +=1;
      if (icon_type%2 == 1) {
        $('#up_icon').addClass("fa fa-caret-up on");
        $('#down_icon').addClass("fa fa-caret-down");
        sort = 2;
    }else if(icon_type%2 == 0) {
        $('#up_icon').addClass("fa fa-caret-up");
        $('#down_icon').addClass("fa fa-caret-down on");
        sort = 3;
    }
}else {
    $('#up_icon').addClass("fa fa-caret-up");
    $('#down_icon').addClass("fa fa-caret-down");
}
$('.shop-list-r-t li').removeClass();
$('#sort' + sort).addClass("active");


api.ajax({
    url: webAddress + '/api/product/index',
    method: 'get',
    data: {
        values: {
                    // page: page,
                    category_id: type_id,
                    sort: sort
                },
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.data != '') {
                    templateFun(ret, 1);
                } else {
                    templateFun(ret);
                }

            } else {
                // alert(JSON.stringify(err));
            }
        });

}

function pullLoading() {
        // api.addEventListener({
        //     name: 'scrolltobottom',
        //     extra: {
        //         threshold: 200
        //     }
        // }, function(ret, err) {
        //       alert('地');
        //     get_detail_Data(0);
        //     // loadData(1,type);
        // });
    }

    // 监听事件 (页面刷新)
    function reloadListener(){
      api.addEventListener({
        name: 'reload',
    }, function(ret, err){
       // getData();
       get_cart();
   });
  }

  function get_cart(category_id) {
    token = $api.getStorage('token');
    if(!token){
        api.openWin({
            name: 'login',
            url: './login.html',
            pageParam: {
                name: 'test'
            }
        });

        return;
    }


    all_money = 0;
    all_count = 0;
    api.ajax({
        url: webAddress + '/api/cart/index',
        method: 'get',
        headers: {
            'Authorization':'Bearer '+ token
        },
    }, function(ret, err) {
        if (ret) {
            // alert(JSON.stringify(ret));
            data_shop = ret;

            for (var i = 0; i < ret.data.length; i++) {
                var small_all_price = parseFloat(ret.data[i].price) * parseInt(ret.data[i].number);
                ret.data[i].small_all_price = small_all_price;
                all_money = all_money + small_all_price;
                all_count = all_count + parseInt(ret.data[i].number);
            }

            $('#title_text').text(all_count + '件商品 - 共' + all_money + '元');
            $('#heji').text('合计：￥' + all_money);
            if(all_count<=99){
                $('#count').text(all_count);
            }else{
                $('#count').text(99);
            }
            // alert(all_count);
            method(category_id);
            var template = $api.byId('template_cart');
            var dotFn = doT.template(template.innerHTML);
            var html = dotFn(ret);
            var list = $api.byId('list_cart');
            $api.html(list, html);
        } else {
                // alert(JSON.stringify(err));
            }
        });

}

function method(category_id){
    // alert(category_id);
    var asd = 0;
    api.ajax({
        url: webAddress + '/api/product/category',
        method: 'get',
        data: {
            values: {},
        }
    }, function(ret, err) {
        if (ret) {
            for (var i = 0; i < data_shop.data.length; i++) {
                for (var j = 0; j < ret.data.length; j++) {
                    if(ret.data[j].id == data_shop.data[i].product.category_id){
                        if(ret.data[j][number] == undefined){
                            ret.data[j][number] = 0;
                        }
                            // alert(ret.data[j][number]);
                            ret.data[j][number] = ret.data[j][number] + parseInt(data_shop.data[i].number);
                            // alert(ret.data[j][number]);
                            // asd = asd + parseInt(data_shop.data[i].number);
                            // ret.data[j].number = asd;
                        }
                    } 
                }
                // alert(new_all_count);   
                // alert(JSON.stringify(ret));
                // console.log( JSON.stringify( ret ) );
                var template = $api.byId('template6');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret);
                var list = $api.byId('list');
                $api.html(list, html);
                if(category_id == undefined){
                    var new_category_id = 0;
                    category_id = 1;
                }else{
                    var new_category_id = category_id - 1;
                }
                get_detail_Data(new_category_id, category_id);

            } else {
                // alert(JSON.stringify(err));
            }
        });

}

function shop_cart_add(id,category_id) {
    // alert(category_id);
    if(!token){
        api.openWin({
            name: 'login',
            url: './login.html',
            pageParam: {
                name: 'test'
            }
        });
        return;
    }

    api.ajax({
        url: webAddress + '/api/cart/add',
        method: 'post',
        headers: {
            'Authorization': 'Bearer '+ token
        },
        data: {
            values: {
                product_id: id,
                number: 1,
                category: 1
            },
        }
    }, function(ret, err) {
        if (ret) {
                // console.log( JSON.stringify( ret ) );
                get_cart(category_id);
            } else {
                // alert(JSON.stringify(err));
            }
        });
}


function shop_cart_update(id, type) {

  if(!token){
    api.openWin({
        name: 'login',
        url: './login.html',
        pageParam: {
            name: 'test'
        }
    });
    return;
}

var count = $('#input_' + id).val();
if (type == 'jia') {
    count = parseInt(count) + 1;

} else {
    count = parseInt(count) - 1;
    if (count == 0) {
        remove_id(id);
        return;
    }
}



api.ajax({
    url: webAddress + '/api/cart/update',
    method: 'post',
    headers: {
        'Authorization': 'Bearer '+ token
    },
    data: {
        values: {
            id: id,
            number: count,
        },
    }
}, function(ret, err) {
    if (ret) {
                // console.log( JSON.stringify( ret ) );
                get_cart();
            } else {
                // alert(JSON.stringify(err));
            }
        });
}


function remove_id(id) {
    remove_cart(id);
}

function remove_all_shop() {

  if(!token){
    api.openWin({
        name: 'login',
        url: './login.html',
        pageParam: {
            name: 'test'
        }
    });
    return;
}

var ids = '';
api.confirm({
    title: '确定清空购物车？',
            // msg: 'testmsg',
            buttons: ['确定', '取消']
        }, function(ret, err) {
            var index = ret.buttonIndex;
            if (index == 1) {
                for (var i = 0; i < data_shop.data.length; i++) {
                    ids += data_shop.data[i].id + ',';
                }
                ids = ids.substring(0, ids.length - 1);
                remove_cart(ids);
            }
        });
}

function remove_cart(ids) {
    api.ajax({
        url: webAddress + '/api/cart/remove',
        method: 'post',
        headers: {
            'Authorization': 'Bearer '+ token
        },
        data: {
            values: {
                ids: ids
            },
        }
    }, function(ret, err) {
        if (ret) {
            get_cart();

        } else {
                // alert(JSON.stringify(err));
            }
        });
}



function settlement() {
    var ids = '';

    if (!data_shop.data.length) {
      api.toast({
          msg: '没有商品可提交!',
          duration: 2000,
          location: 'bottom'
      });

  }

  for (var i = 0; i < data_shop.data.length; i++) {
    ids += data_shop.data[i].id + ',';
}
ids = ids.substring(0, ids.length - 1);

if (ids) {
    api.openWin({
        name: 'shop_order_details',
        url: './shop_order_details.html',
        pageParam: {
            ids: ids
        }
    });
} else {
    api.toast({
        msg: '没有商品可提交!',
        duration: 2000,
        location: 'bottom'
    });
}

}


function shop_cart_on(){
  if(!token){
    api.openWin({
        name: 'login',
        url: './login.html',
        pageParam: {
            name: 'test'
        }
    });
    return;
}


get_cart();
$(".shop-cart-bg").show();
$(".shop-cart").animate({
    bottom:"0rem"
});
}





function goods_details(id) {

  if(!token){
    api.openWin({
        name: 'login',
        url: './login.html',
        pageParam: {
            name: 'test'
        }
    });
    return;
}


api.openWin({
    name: 'goods_details',
    url: './goods_details.html',
    pageParam: {
        id: id
    }
});

}

function entrance(data_,mode_){
    // alert(data_);
    // alert(mode_);
    if(data_ == 1){
        return false;
    }else if(data_ == 2){
        goods_details(mode_);
    }else if(data_ == 4){
        index_web(mode_);
    }
}

function index_web(url) {
    api.openWin({
        name: 'webview',
        url: './webview.html',
        bgColor: '#fff',
        pageParam: {
            url: url
        }
    });
}

function closeWin() {
    api.closeWin({});
}
</script>

</html>
